<template>
	<view class="indexPage">
		<view class="top">
			<view class="logo">
				<image src="@/static/images/newIndex/logo.png"></image>
			</view>
			<view class="icon">
				<image src="@/static/images/newIndex/bg.png"></image>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{ height: scrollViewHeight + 'px' }">
			<view class="functionList">
				<view class="functionItem" v-for="(item,index) in functionList" :key="index" @click="onLink(item.page)">
					<!-- <image :src="item.iconBg" class="itemBg"></image> -->
					<view class="contentBox">
						<image :src="item.icon" class="icon"></image>
						<view class="center">
							<view class="name">{{item.name}}</view>
							<view class="english">{{item.english}}</view>
						</view>
						<image src="@/static/images/newIndex/jt.png" class="itemBg"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				navTop: 0, //距离顶部高度
				scrollViewHeight: 0, //可滚动剩余高度
				noticeList: [],
				functionList: [],
				bannerData: {
					name: "轮播组件",
					type: "banner",
					style: {
						color: "#000000"
					},
					params: {
						interval: "2800",
						height: "230rpx",
						banstyle: "1",
					},
					data: [],
				},
			}
		},
		onShow() {
			this.functionList = [
				// 	{
				// 	name: this.$t('newIndex.zjf'), //'赚算力',
				// 	english: 'Earn points',
				// 	page: '/pages/product/bdGoodsList',
				// 	icon: '/static/images/newIndex/index01.png',
				// 	iconBg: '/static/images/newIndex/indexBg01.png'
				// }, 
				{
					name: this.$t('newIndex.jfsc'), //'算力商城',
					english: 'Points Mall',
					page: '/pages/product/catalog',
					// page: 't',
					icon: '/static/images/newIndex/index.png',
					// iconBg: '/static/images/newIndex/indexBg02.png'
				},
				// {
				// 	name: '易联道智能交易策略终端', //'AI算力智能搬砖',
				// 	english: 'Yilian Dao Intelligent Trading Strategy Terminal',
				// 	page: 'yld',
				// 	icon: '/static/images/newIndex/index03.png',
				// 	iconBg: '/static/images/newIndex/indexBg03.png'
				// },
				// {
				// 	name: this.$t('newIndex.djkstxt'), // '大健康生态系统',
				// 	english: 'Big health ecosystem',
				// 	page: '',
				// 	icon: '/static/images/newIndex/index04.png',
				// 	iconBg: '/static/images/newIndex/indexBg04.png'
				// }, {
				// 	name: this.$t('newIndex.qcstxt'), // '汽车生态系统',
				// 	english: 'Automotive ecosystem',
				// 	page: '',
				// 	icon: '/static/images/newIndex/index05.png',
				// 	iconBg: '/static/images/newIndex/indexBg05.png'
				// }, {
				// 	name: this.$t('newIndex.fdcstxt'), //'房地产生态系统',
				// 	english: 'Real Estate Ecosystem',
				// 	page: '',
				// 	icon: '/static/images/newIndex/index06.png',
				// 	iconBg: '/static/images/newIndex/indexBg06.png'
				// }, 
				{
					name: this.$t('newIndex.jfhzxt'), //'算力划转系统（OTC）',
					english: 'Points Transfer (OTC)',
					// /pages/newPage/otc?id=1
					page: '/pages/otcApp',
					icon: '/static/images/newIndex/index2.png',
					// iconBg: '/static/images/newIndex/indexBg07.png'
				},
				// {
				// 	name: this.$t('newIndex.jfcj'), //'算力抽奖',
				// 	english: 'Points draw',
				// 	//pages/apps/jinyuanbao/choujiang/choujiang
				// 	page: '/pages/apps/jinyuanbao/choujiang/choujiang',
				// 	icon: '/static/images/newIndex/index3.png',
				// 	iconBg: '/static/images/newIndex/indexBg08.png'
				// }, {
				// 	name: this.$t('newIndex.gpxt'), //'股票系统',
				// 	english: 'Stock system',
				// 	page: '',
				// 	icon: '/static/images/newIndex/index4.png',
				// 	iconBg: '/static/images/newIndex/indexBg09.png'
				// }
			]
		},
		onLoad() {
			this.getNoticeList()
			this.getBannerList()
		},
		onReady() {
			var wanlsys = this.$wanlshop.wanlsys();
			this.windowHeight = wanlsys.windowHeight;
			let _self = this
			let view = uni.createSelectorQuery().select('.functionList')
			view.boundingClientRect(data => {
				_self.navTop = data.top
				_self.scrollViewHeight = _self.windowHeight - data.top
			}).exec()
		},
		methods: {
			onLink(url) {
				if (url == '') {
					return uni.showToast({
						icon: 'none',
						title: '敬请期待'
					})
				}
				let user = uni.getStorageSync("wanlshop:user")
				if (!user) {
					return uni.showToast({
						icon: 'none',
						title: '未登录,请先登录'
					})
				}
				if (url == 'yld') {
					var browser = {
						versions: function() {
							var u = navigator.userAgent,
								app = navigator.appVersion;
							return { //移动终端浏览器版本信息
								trident: u.indexOf('Trident') > -1, //IE内核
								presto: u.indexOf('Presto') > -1, //opera内核
								webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
								gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
								mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
								ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
								android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
								iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
								iPad: u.indexOf('iPad') > -1, //是否iPad
								webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
							};
						}(),
						language: (navigator.browserLanguage || navigator.language).toLowerCase()
					}
					if (browser.versions.mobile) { //判断是否是移动设备打开.
						var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
						if (window.plus) { //app内打开
							plus.runtime.openURL('http://54.95.146.134:8890/#/admin/robot?id=1')
						} else if (ua.match(/MicroMessenger/i) == "micromessenger") { //在微信中打开
							window.location.href = 'http://54.95.146.134:8890/#/admin/robot?id=1'
						} else if (browser.versions.ios) { //安卓浏览器打开
							window.location.href = 'http://54.95.146.134:8890/#/admin/robot?id=1'
						} else { // (browser.versions.android)IOS浏览器打开
							window.location.href = 'http://54.95.146.134:8890/#/admin/robot?id=1'
						}
					} else { //否则就是PC浏览器打开
						window.location.href = 'http://54.95.146.134:8890/#/admin/robot?id=1'
					}
				} else {
					this.$wanlshop.auth(url);
				}
			},
			getNoticeList() {
				uni.request({
					url: "/index/noticeList",
					method: "POST",
					data: {},
					complete: (res) => {
						if (res.res.code == 1) {
							this.noticeList = res.res.data
						}
					},
				});
			},
			getBannerList() {
				uni.request({
					url: "/index/wapBanner",
					method: "POST",
					data: {},
					complete: (res) => {
						if (res.res.code == 1) {
							this.bannerData.data = res.res.data
						}
					},
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.indexPage {
		position: relative;
		// overflow: hidden;
		background: linear-gradient(180deg, #C93E34 0%, #CF403A 52%, #FFF9F4 100%);
		background-attachment: fixed;
	}

	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 60rpx 0 60rpx;

		.logo {
			width: 312rpx;
			height: 114rpx;


		}

		.icon {
			width: 210rpx;
			height: 202rpx;
		}

		uni-image {
			width: 100%;
			height: 100%;
		}
	}

	.indexBg {
		width: 100%;
		height: 328rpx;
		position: absolute;
		top: 0;
		z-index: 1;
	}

	.bannerBox {}

	.functionList {
		margin: 10rpx 28rpx;

		.functionItem {
			position: relative;
			background: linear-gradient(90deg, #FFF9F4 0%, #FBEEE9 100%);
			box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.01);
			border-radius: 10rpx;
			overflow: hidden;
			margin-bottom: 30rpx;
			border-radius: 24rpx;
			border: 2rpx solid #EDD5C6;

			.itemBg {
				position: absolute;
				width: 48rpx;
				height: 48rpx;
				right: 48rpx;
			}

			.contentBox {
				position: relative;
				padding: 48rpx;
				z-index: 3;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.icon {
					width: 80rpx;
					height: 80rpx;
				}

				.center {
					flex: 1;
					width: 0;
					margin-left: 32rpx;

					.name {

						font-weight: 500;
						font-size: 30rpx;
						color: #672918;
						line-height: 42rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}

					.english {
						width: 450rpx;
						font-size: 22rpx;
						color: #A28C8C;
						line-height: 32rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}
				}
			}
		}
	}
</style>